<template>
  <div class="gzl">
    <div class="search">
      <el-form :inline="true" :model="search" class="demo-form-inline">
        <el-form-item label="输入搜索">
          <el-input
            v-model="Pagination.key"
            placeholder="请输入设备名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="输入时间">
          <el-date-picker
            v-model="search.time"
            @change="chage"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item
        >
          <el-button type="primary"
          >查询
          </el-button
          >
        </el-form-item
        >
      </el-form>
      <el-button class="ebtn" type="warning" @click="xinzengbtn()">新增信息</el-button>
    </div>
    <el-table class="table" stripe :data="tableDataCustomer" style="width: 100%" height="580">
      <el-table-column type="index" label="序号" align="center" width="70"/>
      <el-table-column prop="clientUnits" label="客户名称" align="center"/>
      <el-table-column label="信息列表" align="center">
        <template slot-scope="scope" slot="header">
          <el-select v-model="infoTypeSelted" @change="selectTypeChange" placeholder="请选择类型" style="width: 120px">
            <el-option :value="0" label="全部"></el-option>
            <el-option
              v-for="item in options_infoType"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            ></el-option>
          </el-select>
        </template>
        <template v-slot="scope">
          <span v-if="scope.row.type==0">异常</span>
          <span v-if="scope.row.type==1">投诉</span>
          <span v-if="scope.row.type==2">售后</span>
          <span v-if="scope.row.type==3">服务</span>
          <span v-if="scope.row.type==4">市场信息</span>
          <span v-if="scope.row.type==5">咨询</span>
          <span v-if="scope.row.type==6">服务站</span>
          <span v-if="scope.row.type==7">其他</span>
        </template>
      </el-table-column>
      <el-table-column prop="carType" label="客车型号" align="center"/>
      <el-table-column prop="clientName" label="联系人" align="center"/>
      <el-table-column prop="lianxirenPhone" label="联系方式" align="center"/>
      <el-table-column prop="createOnTime" label="创建时间" align="center">
        <template v-slot="scope">
          {{ renderTime(scope.row.createOnTime) }}
        </template>
      </el-table-column>
      <el-table-column prop="userName" label="记录人" align="center"/>
      <el-table-column prop="status" label="状态" align="center">
        <template v-slot="scope">
          <span v-if="scope.row.status==1">待处理</span>
          <span v-if="scope.row.status==2">已通知</span>
          <span v-if="scope.row.status==3">待回访</span>
          <span v-if="scope.row.status==4">已完成</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.status==1"
            size="small"
            type="warning"
            @click="dialogVisiblecustomerInfo = true;dealWith(scope.row.id)"
          >处理
          </el-button>
          <el-button
            v-if="scope.row.status==3"
            size="small"
            type="primary"
            @click="dialogVisible_huifang=true;returnVisit(scope.row.id)"
          >回访
          </el-button>
          <el-button size="small" type="text" @click="dialogVisible3=true;showDetail(scope.row.id)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pgnt">
      <el-pagination
        background
        layout="prev, pager, next"
        :current-page="Pagination.current"
        :page-size="Pagination.pagesize"
        @current-change="handleCurrentChange"
        :total="Pagination.total"
      ></el-pagination>
    </div>
    <!--新增信息-->
    <el-dialog
      title="新增顾客信息"
      :visible.sync="dialogVisible"
      width="60%"
      append-to-body>
      <div class="el-checkbox-big">
        <span>信息类别</span>
        <template>
          <el-radio v-model="customerInfo.type" label="1">投诉</el-radio>
          <el-radio v-model="customerInfo.type" label="2">售后</el-radio>
          <el-radio v-model="customerInfo.type" label="3">服务</el-radio>
          <el-radio v-model="customerInfo.type" label="4">市场信息</el-radio>
          <el-radio v-model="customerInfo.type" label="5">咨询</el-radio>
          <el-radio v-model="customerInfo.type" label="6">服务站</el-radio>
          <el-radio v-model="customerInfo.type" label="7">其他</el-radio>
        </template>
      </div>
      <div class="intermediate">
        <ul>
          <li>
            <span>客户名称</span>
            <el-input style="width: 63%;" v-model="customerInfo.clientUnits"></el-input>
          </li>
          <li>
            <span>地址</span>
            <el-input style="width: 63%;" v-model="customerInfo.adress"></el-input>
          </li>
          <li>
            <span>客车型号</span>
            <el-input style="width: 63%;" v-model="customerInfo.carType"></el-input>
          </li>
          <li>
            <span>联系人</span>
            <el-input style="width: 63%;" v-model="customerInfo.clientName"></el-input>
          </li>
          <li>
            <span>车牌号</span>
            <el-input style="width: 63%;" v-model="customerInfo.carNumber"></el-input>
          </li>
          <li>
            <span>行驶证登记日期</span>
            <el-date-picker
              style="width: 63%;"
              v-model="customerInfo.xingshizhengTime"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </li>
          <li>
            <span>联系电话</span>
            <el-input style="width: 63%;" v-model="customerInfo.lianxirenPhone"></el-input>
          </li>
          <li class="el-checkbox-bigbox">
            <div>
              <span>空调种类</span>
              <template>
                <el-radio v-model="customerInfo.kongtiaoType" label="电动">电动</el-radio>
                <el-radio v-model="customerInfo.kongtiaoType" label="普通">普通</el-radio>
              </template>
            </div>
            <div>
              <span>空调安装类型</span>
              <template>
                <el-radio v-model="customerInfo.anzhuangType" label="内置">内置</el-radio>
                <el-radio v-model="customerInfo.anzhuangType" label="顶置">顶置</el-radio>
              </template>
            </div>
          </li>
        </ul>
      </div>
      <div class="xinxi">
        <el-input
          type="textarea"
          :autosize="{ minRows: 6, maxRows: 8}"
          placeholder="信息描述 :"
          v-model="customerInfo.message">
        </el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false|saveTelRepair()">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
  </span>
    </el-dialog>
    <!--处理-->
    <el-dialog
      title="顾客信息记录表"
      :visible.sync="dialogVisiblecustomerInfo"
      width="60%"
      append-to-body>
      <div class="el-inputbox">
        <div>
          <span>信息类别</span>
          <el-input disabled style="width: 50%;" v-bind:value="customerInfo.type|formatType">
          </el-input>
        </div>

        <div>
          <span>记录人</span>
          <el-input disabled style="width: 50%;" v-model="customerInfo.userName"></el-input>
        </div>
      </div>
      <div class="intermediate">
        <ul>
          <li>
            <span>客户名称</span>
            <el-input disabled style="width: 63%;" v-model="customerInfo.clientUnits"></el-input>
          </li>
          <li>
            <span>地址</span>
            <el-input disabled style="width: 63%;" v-model="customerInfo.adress"></el-input>
          </li>
          <li>
            <span>客车型号</span>
            <el-input disabled style="width: 63%;" v-model="customerInfo.carType"></el-input>
          </li>
          <li>
            <span>联系人</span>
            <el-input disabled style="width: 63%;" v-model="customerInfo.clientName"></el-input>
          </li>
          <li>
            <span>车牌号</span>
            <el-input disabled style="width: 63%;" v-model="customerInfo.carNumber"></el-input>
          </li>
          <li>
            <span>行驶证登记日期</span>
            <el-input disabled style="width: 63%;" v-model="customerInfo.xingshizhengTime"></el-input>
          </li>
          <li>
            <span>联系电话</span>
            <el-input disabled style="width: 63%;" v-model="customerInfo.lianxirenPhone"></el-input>
          </li>
          <li>
            <span>空调种类</span>
            <el-input disabled style="width: 63%" v-model="customerInfo.kongtiaoType"></el-input>
          </li>
          <li>
            <span>空调安装类型</span>
            <el-input disabled style="width: 63%" v-model="customerInfo.anzhuangType"></el-input>
          </li>
        </ul>
      </div>
      <div class="xinxi">
        <el-input
          disabled
          type="textarea"
          :autosize="{ minRows: 6, maxRows: 8}"
          placeholder="信息描述 :"
          v-model="customerInfo.message">
        </el-input>
      </div>
      <div class="xuanze">
        <span>处理方式</span>
        <template>
          <el-select v-model="customerInfo.depId" value-key="item.id" placeholder="请选择部门" @change="handleChangeDepart">
            <el-option
              v-for="item in options_department"
              :key="item.id"
              :label="item.departname"
              :value="item.departcode">
            </el-option>
          </el-select>
        </template>
        <template v-if="isShowDepartment">
          <el-select v-model="customerInfo.district" value-key="key" placeholder="请选择区域">
            <el-option
              v-for="item in options_area"
              :key="item.key"
              :label="item.key"
              :value="item.key">
            </el-option>
          </el-select>
        </template>
        <template v-if="isShowDepartment">
          <el-select  v-model="value1" placeholder="请选择站点" @change="handlerChangeSite">
            <el-option
              v-for="(item,index) in options_site"
              :key="item.id"
              :label="item.siteName"
              :value="index">
            </el-option>
          </el-select>
        </template>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisiblecustomerInfo = false;dealWithConfirm()">确 定</el-button>
        <el-button @click="dialogVisiblecustomerInfo = false">取 消</el-button>
  </span>
    </el-dialog>
    <!--回放-->
    <el-dialog
      title="顾客信息回访表"
      :visible.sync="dialogVisible_huifang"
      width="60%"
      append-to-body>
      <div class="el-inputbox">
        <div>
          <span>信息类别</span>
          <el-input disabled style="width: 50%;" v-model="customerInfo.type|formatType"></el-input>
        </div>
        <div>
          <span>处理方式</span>
          <el-input disabled style="width: 50%;" v-model="customerInfo"></el-input>
        </div>
        <div>
          <span>记录人</span>
          <el-input disabled style="width: 50%;" v-model="customerInfo.userName"></el-input>
        </div>
      </div>
      <div class="intermediate" >
        <ul>
          <li>
            <span>客户名称</span>
            <el-input disabled style="width: 63%;" v-model="customerInfo.clientUnits"></el-input>
          </li>
          <li>
            <span>地址</span>
            <el-input disabled style="width: 63%;" v-model="customerInfo.adress"></el-input>
          </li>
          <li>
            <span>客车型号</span>
            <el-input disabled style="width: 63%;" v-model="customerInfo.carType"></el-input>
          </li>
          <li>
            <span>联系人</span>
            <el-input disabled style="width: 63%;" v-model="customerInfo.clientName"></el-input>
          </li>
          <li>
            <span>车牌号</span>
            <el-input disabled style="width: 63%;" v-model="customerInfo.carNumber"></el-input>
          </li>
          <li>
            <span>行驶证登记日期</span>
            <el-input disabled style="width: 63%;" v-model="customerInfo.xingshizhengTime"></el-input>
          </li>
          <li>
            <span>联系电话</span>
            <el-input disabled style="width: 63%;" v-model="customerInfo.lianxirenPhone"></el-input>
          </li>
          <li>
            <span>空调种类</span>
            <el-input disabled style="width: 63%" v-model="customerInfo.kongtiaoType"></el-input>
          </li>
          <li>
            <span>空调安装类型</span>
            <el-input disabled style="width: 63%" v-model="customerInfo.anzhuangType"></el-input>
          </li>
        </ul>
      </div>
      <div class="xinxi">
        <el-input
          disabled
          type="textarea"
          :autosize="{ minRows: 6, maxRows: 8}"
          placeholder="信息描述 :"
          v-model="customerInfo.message">
        </el-input>

        <el-input
          type="textarea"
          :autosize="{ minRows: 6, maxRows: 8}"
          placeholder="回访记录 :"
          class="el-textarea-box"
          v-model="customerInfo.huifangjilu">
        </el-input>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible_huifang = false;returnVisitConfirm()">确 定</el-button>
        <el-button @click="dialogVisible_huifang = false">取 消</el-button>
  </span>
    </el-dialog>
    <!--详情-->
    <el-dialog
      title="顾客信息记录表"
      :visible.sync="dialogVisible3"
      width="60%"
      append-to-body>
      <div class="el-inputbox">
        <div>
          <span>信息类别</span>
          <el-input disabled style="width: 50%;" v-model="customerInfo.type|formatType"></el-input>
        </div>

        <div>
          <span>记录人</span>
          <el-input disabled style="width: 50%;" v-model="customerInfo.userName"></el-input>
        </div>
      </div>
      <div class="intermediate">
        <ul>
          <li>
            <span>客户名称</span>
            <el-input disabled style="width: 63%;" v-model="customerInfo.clientUnits"></el-input>
          </li>
          <li>
            <span>地址</span>
            <el-input disabled style="width: 63%;" v-model="customerInfo.adress"></el-input>
          </li>
          <li>
            <span>客车型号</span>
            <el-input disabled style="width: 63%;" v-model="customerInfo.carType"></el-input>
          </li>
          <li>
            <span>联系人</span>
            <el-input disabled style="width: 63%;" v-model="customerInfo.clientName"></el-input>
          </li>
          <li>
            <span>车牌号</span>
            <el-input disabled style="width: 63%;" v-model="customerInfo.carNumber"></el-input>
          </li>
          <li>
            <span>行驶证登记日期</span>
            <el-input disabled style="width: 63%;" v-model="customerInfo.xingshizhengTime"></el-input>
          </li>
          <li>
            <span>联系电话</span>
            <el-input disabled style="width: 63%;" v-model="customerInfo.lianxirenPhone"></el-input>
          </li>
          <li>
            <span>空调种类</span>
            <el-input disabled style="width: 63%" v-model="customerInfo.kongtiaoType"></el-input>
          </li>
          <li>
            <span>空调安装类型</span>
            <el-input disabled style="width: 63%" v-model="customerInfo.anzhuangType"></el-input>
          </li>
        </ul>
      </div>
      <p style="margin-top: 10px;" v-show="customerInfo.status==4">处理信息</p>
      <div class="xinxi" v-show="customerInfo.status==4">
        <el-input
          type="textarea"
          disabled
          :autosize="{ minRows: 6, maxRows: 8}"
          placeholder="信息描述 :"
          v-model="customerInfo.message">
        </el-input>
      </div>
      <p style="margin-top: 10px;">回访记录</p>
      <div class="xinxi">
        <el-input
          type="textarea"
          disabled
          :autosize="{ minRows: 6, maxRows: 8}"
          placeholder="信息描述 :"
          v-model="customerInfo.huifangjilu">
        </el-input>
      </div>
      <div class="xuanze" v-show="customerInfo.status != 1">
        <span v-show="customerInfo.status != 1">处理方式</span>
        <el-input disabled style="width: 15%;" v-model="customerInfo.depId" v-show="customerInfo.status != 1"></el-input>
        <template>
          <span v-show="customerInfo.district != ''">区域</span>
          <el-input disabled style="width: 15%;" v-model="customerInfo.district" v-show="customerInfo.district != ''"></el-input>
        </template>
        <template>
          <span v-show="customerInfo.siteName !=''">站点</span>
          <el-input disabled style="width: 15%;" v-model="customerInfo.siteName" v-show="customerInfo.siteName !=''"></el-input>
        </template>
      </div>
      <span slot="footer" class="dialog-footer">
       <!-- <el-button type="primary" @click="dialogVisible3 = false">确 定</el-button>-->
        <el-button @click="dialogVisible3 = false">取 消</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  //import引入的组件需要注入到对象中才能使用",
  inject: ['reload'],
  components: {},
  data() {
    //这里存放数据",
    return {
      GlobalType:0,//全局
      departMentInfo:"",
      areaInfo:"",
      siteInfo:"",
      options_area: [{key: "城南"}, {key: "城东"}, {key: "城西"}, {key: "城北"}],
      isShowDepartment: false,
      options_site: [],
      options_department: [],
      infoType: "",
      infoTypeSelted: null,
      customerInfo: {},
      options_infoType: [{id: 1, title: "投诉"}, {id: 2, title: "售后"}, {id: 3, title: "服务"},
        {id: 4, title: "市场信息"}, {id: 5, title: "咨询"}, {id: 6, title: "服务站"}, {id: 7, title: "其他"}],
      dialogVisible: false,
      dialogVisiblecustomerInfo: false,
      dialogVisible_huifang: false,
      dialogVisible3: false,
      search: {key: "", start: "", end: ""},
      tableDataCustomer: [],
      checkList: [],
      options: [],
      value: null,
      value1:null,
      textarea2: [],
      total: 1,
      current: 1,
      pagesize: 10,
      /*=============分页=======================*/
      Pagination: {
        beginTime: "",
        endTime: "",
        key: "",
        total: 1,//总共页
        current: 1,//当前页
        pagesize: 10,//页面数据个数
      },
    };
  },
  //监听属性 类似于data概念",
  computed: {},
  //监控data中的数据变化",
  watch: {},
  //方法集合",
  methods: {
    xinzengbtn(){
      this.dialogVisible= true
      this.customerInfo={}
    },
    returnVisitConfirm(){
      axios.post("/JX_java/afferSale/phone/updatePhoneMaintain?type=" + 2,this.customerInfo).then(res => {
        if (res.data.data == "操作成功") {
          this.$message.success(res.data.data);
          this.getList(this.GlobalType);
          // this.reload();
        } else {
          this.$message.error(res.data.data);
        }
      })
    },
    showDetail(e){
      axios.get("/JX_java/afferSale/phone/getPhoneMaintainDetails?pid=" + e).then(res => {
        let {data} = res.data
        this.customerInfo = {};
        this.customerInfo = data;
        console.log(this.customerInfo,1111111111111111111111111111111111)
        if(this.customerInfo.depId = 9) {
          this.customerInfo.depId = "业务科"
        }else if (this.customerInfo.depId = 10){
          this.customerInfo.depId = "服务科"
        }
        this.customerInfo.xingshizhengTime = this.renderTime(this.customerInfo.xingshizhengTime)
        this.getDepartInfoDbList();
      })
    },
    dealWithConfirm() {
      axios.post("/JX_java/afferSale/phone/updatePhoneMaintain?type=" + 1,this.customerInfo).then(res => {
        if (res.data.data == "操作成功") {
          this.$message.success(res.data.data);
          this.dialogVisiblecustomerInfo = false
          this.getList(this.GlobalType);
          // this.reload();
        } else {
          this.$message.error(res.data.data);
        }
      })
    },
    //处理
    dealWith: function (id) {
      axios.get("/JX_java/afferSale/phone/getPhoneMaintainDetails?pid=" + id).then(res => {
        console.log(res.data.data,1111111111111)
        let {data} = res.data
        this.customerInfo = {};
        this.customerInfo = data;
        this.customerInfo.xingshizhengTime = this.renderTime(this.customerInfo.xingshizhengTime)
        this.getDepartInfoDbList();

      })
    },
    //回访
    returnVisit(id) {
      axios.get("/JX_java/afferSale/phone/getPhoneMaintainDetails?pid=" + id).then(res => {
        console.log(res.data)
        let {data} = res.data
        this.customerInfo = {};
        this.customerInfo = data;
        this.customerInfo.xingshizhengTime = this.renderTime(this.customerInfo.xingshizhengTime)
        this.getDepartInfoDbList();
      })
    },
    handlerChangeSite(index) {
      this.customerInfo.siteId = this.options_site[index].id;
      this.customerInfo.siteName = this.options_site[index].siteName
    },
    //展示所有的站点
    showSite() {
      axios("/JX_java/afferSale/site/getSiteList").then((res) => {
        console.log(res.data.data)
        this.options_site = res.data.data
      })
    },
    handleChangeDepart(d) {
      //9业务科   10 服务科
      if (d != 9) {
        this.isShowDepartment = true;
        this.showSite();
      } else {
        this.isShowDepartment = false;
      }
    },
    //格式化时间
    renderTime(date) {
      return date==null?"":date.substring(0, 10);
    },
    //获取业务科和服务科
    getDepartInfoDbList() {
      axios.get("/JX_java/common/getDepartInfoDbList").then(res => {
        console.log(res.data.data)
        let {departInfoDbs} = res.data.data
        this.options_department = departInfoDbs;

        console.log(this.options_department)
      })
    },
    //列表展示
    getList: function (type) {
      let param = {
        "beginTime": this.Pagination.beginTime,
        "endTime": this.Pagination.endTime,
        "key": this.Pagination.key,
        "pageNum": this.Pagination.current,
        "pageSize": this.Pagination.pagesize,
        "type": type
      }
      let message = JSON.parse(localStorage.getItem("message"));
      axios.post("/JX_java/afferSale/phone/getPhoneMaintainList?userId=" + message.Id, param).then(res => {
        let {pageNum, pageSize, totalSize, totalPages, content} = res.data.data
        console.log(pageNum, pageSize, totalSize, totalPages)
        this.tableDataCustomer = content
        this.Pagination.total=totalPages
        console.log(this.tableDataCustomer)
      })
    },
//新增电话维保
    saveTelRepair() {
      let param = {
        "adress": "",
        "anzhuangType": "",
        "carNumber": "",
        "carType": null,//客车型号
        "clientName": "",
        "clientUnits": "",
        "createOnTime": "",
        "depId": null,
        "district": "",
        "huifangjilu": "",
        "id": null,
        "kongtiaoType": "",
        "lianxirenPhone": "",
        "message": "",
        "siteId": null,
        "siteMaintainId": null,
        "siteName": "",
        "status": null,
        "type": null,
        "userId": null,
        "userName": "",
        "xingshizhengTime": ""
      }
      //
      param.clientUnits = this.customerInfo.clientUnits//客户名称
      param.adress = this.customerInfo.adress
      param.carType = this.customerInfo.carType
      param.clientName = this.customerInfo.clientName
      param.carNumber = this.customerInfo.carNumber
      param.xingshizhengTime = this.customerInfo.xingshizhengTime
      param.lianxirenPhone = this.customerInfo.lianxirenPhone
      param.kongtiaoType = this.customerInfo.kongtiaoType
      param.anzhuangType = this.customerInfo.anzhuangType
      param.message = this.customerInfo.message
      param.type = parseInt(this.customerInfo.type)
      param.userId = JSON.parse(localStorage.getItem("message")).Id;
      param.userName = JSON.parse(localStorage.getItem("message")).Name;
      console.log(param)
      axios.post("/JX_java/afferSale/phone/addPhoneMaintain", param).then(res => {
        if (res.data.data == "操作成功") {
          this.$message.success(res.data.data);
          this.reload();
        } else {
          this.$message.error(res.data.data);
        }
      })
    },
    selectTypeChange(e) {
      this.GlobalType=e
      this.getList(e)
    },
    // 分页
    handleCurrentChange(e) {
      this.Pagination.current=e
      this.getList(this.GlobalType)
    },
    // 日期改变
    chage(e) {
      if (e) {
        this.Pagination.beginTime = e[0];
        this.Pagination.endTime = e[1];
      } else {
        this.Pagination.beginTime = '';
        this.Pagination.endTime = '';
      }
    },
    // 筛选
    onsubmit() {
      this.getList(this.GlobalType);
    }
  },
  //生命周期 - 创建之前",数据模型未加载,方法未加载,html模板未加载
  beforeCreate() {
  },

  //生命周期 - 创建完成（可以访问当前this实例）",数据模型已加载，方法已加载,html模板已加载,html模板未渲染
  created() {
    this.getList(this.GlobalType);
  },
  //生命周期 - 挂载之前",html模板未渲染
  beforeMount() {

  },

  //生命周期 - 挂载完成（可以访问DOM元素）",html模板已渲染
  mounted() {

  },

  //生命周期 - 更新之前",数据模型已更新,html模板未更新
  beforeUpdate() {

  },
  //生命周期 - 更新之后",数据模型已更新,html模板已更新
  updated() {

  },
  //生命周期 - 销毁之前",
  beforeDestroy() {

  },
  destroyed() {

  },
  //生命周期 - 销毁完成",
  //如果页面有keep-alive缓存功能，这个函数会触发",
  activated() {

  },
}
</script>
<style lang="scss" scoped>
.gzl {
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
}

.table {
  margin-bottom: 20px;
}

.pgnt {
  text-align: center;
}

.demo-form-inline {
  display: inline-block;
}

.search {
  height: 50px;
  border-radius: 5px;
  background-color: #fff;
  padding-left: 20px;
  padding-top: 10px;
  margin-bottom: 20px;
  overflow: hidden;
}

.ebtn {
  float: right;
  margin-right: 20px;
}


.el-checkbox-big {
  //margin-left: 25px;
  //border-top: 1px solid rgb(220, 222, 226);
  //padding-top: 20px;

  .el-checkbox-box {
    margin-left: 10px;
    display: inline-block;
    width: 70%;
  }
}

.intermediate {
  margin-top: 30px;

  ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    color: #909399;
    margin-top: 20px;

    .el-checkbox-bigbox {
      //display: inline-block;
      display: flex;
      flex-wrap: wrap;
      width: 65%;

      div {
        display: inline-block;
        width: 50%;
        display: flex;
        align-items: center;

        span {
          display: inline-block;
          width: 30%;
          margin-right: 5px;
        }

        .el-checkbox-box {
          width: 60%;
        }
      }
    }

    li {

      width: 33%;
      font-size: 14px;
      margin-bottom: 10px;
      text-align: center;

      span {
        display: inline-block;
        width: 35%;
      }
    }

  }
}

.xinxi {
  border-bottom: 1px solid rgb(220, 222, 226);
  padding-bottom: 30px;

  .el-textarea {
    margin-top: 10px;
  }

  .el-textarea-box {
    margin-top: 30px;
  }
}

.el-inputbox {
  //border-top: 1px solid rgb(220, 222, 226);
  //padding-top: 20px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;

  div {
    width: 30%;
    margin-left: 30px;

    span {
      display: inline-block;
      margin-right: 10px;
    }
  }
}

.xuanze {
  margin-top: 20px;

  span {
    display: inline-block;
    margin-right: 10px;
  }

  .el-select {
    margin-right: 10px;
  }
}


</style>
